﻿@model OSBLE.Models.Users.Mail
@using OSBLE.Models
@using OSBLE.Models.Users

@{
    ViewBag.Title = "Create";
    List<UserProfile> recipients = Session["mail_recipients"] as List<UserProfile>;
    string ids = "";
}

<h2>@ViewBag.MailHeader</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm("Create", "Mail", FormMethod.Post))
{
    @Html.ValidationSummary(true)

    @Html.HiddenFor(model => model.ContextID)

    <a>To:</a>
    <input id="people_finder" />
    @Helpers.CreateToolTip(ToolTips.MailRecipient) 
   
    <br />
    <div id="recipients_data">
        @if (recipients.Count > 0)
        {
            var numRec = 0;
            foreach (UserProfile up in recipients)
            {
                // injecting a comma in between id's
                if (numRec > 0) 
                {
                    ids += ",";
                }
                ids += up.ID;
                ++numRec;
                
                <div id="@up.ID" class="recipient" >
                    <div class="recipient_tools">
                        <a href="#" title="Delete this recipient" onclick="removeRecipient(this)">
                            <img src="/Content/images/delete_up.png" alt="Delete Button" />
                        </a>
                    </div>
                    <a>
                        <img src="@Url.Action("ProfilePicture")/@up.ID" class="small_profile_picture" alt="Profile Picture" />
                        @up.FirstName @up.LastName
                    </a>
                </div>
            }
        }
    </div>
    <input type="hidden" id="recipient_list" name="recipientlist" value="@ids" />
    
    <div class="editor-field" style="clear: both;">
        @Html.LabelFor(model => model.Subject): @Html.EditorFor(model => model.Subject)<br />
        @Html.ValidationMessageFor(model => model.Subject)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Message)
    </div>
    <div class="editor-field" id="message_area">
        @Html.TextAreaFor(model => model.Message, new { @id = "send_mail_textarea" })<br />
        @Html.ValidationMessageFor(model => model.Message)
    </div>

    <p>
        <input id="send_btn" type="submit" value="Send Message" disabled="disabled"/>
    </p>
    
    
    <script type="text/javascript">
        var strids = $('#recipient_list').val();
        var list = new Array();

        if(strids != "")
        {
            var temp = strids.split(',');
            var i = 0;

            for(i = 0; i < temp.length; ++i)
            {
                list.push(temp[i]);
            }
            document.getElementById("send_btn").disabled = false;
            // if there are recipients setting the focus to the message area.
            document.getElementById("send_mail_textarea").focus();
        }
        else
        {
            $('#recipients_data').append('<div id="NoRecipient" class="recipient" />');
            var NoRecipient = $('#NoRecipient');
            NoRecipient.append('<div class="recipient_tools"/><a><< No Recipients >></a>');
            // if no recipients then set focus to the To field.
            document.getElementById("people_finder").focus();
        }

        var selection_state = false;
        
        $("#people_finder").autocomplete({
            source: "@(Url.Action("Search"))",
            select: function(event, ui) {
                $(this).val("");
                // repeat entry error checking                             
                if($.inArray(ui.item.value, list) == -1)
                {
                    list.push(ui.item.value);
                    var id = ui.item.value;

                    $('#NoRecipient').remove();
                    document.getElementById("send_btn").disabled = false;

                    // create new item
                    $('#recipients_data').append('<div id="' + id + '" class="recipient" />');
                    var newRecipient = $('#' + id);

                    // delete button  
                    newRecipient.append('<div class="recipient_tools"><a href="#" title="Delete this recipient" onclick="removeRecipient(this)"><img src="/Content/images/delete_up.png" alt="Delete Button" /></a></div>');                                                                                                                                                                                                  
                    
                    // main layout
                    newRecipient.append("<a>");
                    newRecipient.append('<img src="@Url.Action("ProfilePicture")/' + ui.item.value + '" class="small_profile_picture" alt="Profile Picture" />' + ui.item.label + "</a>");

                    $('#recipient_list').val(list);
                    $('#recipient_list').serializeArray();
                }
                return false;
            },
            focus: function(event, ui) {return false;}
        }).data("autocomplete")._renderItem = function( ul, item ) {
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + '<img src="@Url.Action("ProfilePicture")/' + item.value + '" class="small_profile_picture" alt="Profile Picture" /> ' + item.label + '</a>')
            .appendTo( ul );
        }


        function removeRecipient(div) {
            var id = $(div).parent().parent().attr("id");
            $(div).parent().parent().remove();

            list.splice($.inArray(id, list), 1);

            $('#recipient_list').val(list);
            $('#recipient_list').serializeArray();

            if(list.length < 1)
            {
                $('#recipients_data').append('<div id="NoRecipient" class="recipient" />');
                var NoRecipient = $('#NoRecipient');
                NoRecipient.append('<div class="recipient_tools"/><a><< No Recipients >></a>');
                document.getElementById("send_btn").disabled = true;
            }
        }
    </script>
}

<div>
    @Html.ActionLink("Back to Inbox", "Index")
</div>

    
